<template>
  <div>
    <van-search
      placeholder="请输入搜索关键词"
      shape="round"
      v-model="keyword"
      @search="sou"
    />
    <section v-show="keyword.length == ''">
      <p>
        <span>搜索历史</span>
        <van-icon name="delete" @click="del" />
      </p>
      <ul>
        <li v-for="(item, key) in $store.state.history" :key="key">
          {{ item }}
        </li>
      </ul>
    </section>
    <div class="boxone">
      <dl v-for="(item, key) in sousuo" :key="key" v-show='sousuo.length!=0'>
        <dt>
          <img :src="item.pic" alt="" />
        </dt>
        <dd>{{ item.name }}</dd>
      </dl>
      <p v-show='sousuo.length==0'>没有找到你搜索的数据</p>
    </div>
    <!-- <tjxq :sousuo='sousuo'></tjxq> -->
  </div>
</template>

<script>
// import tjxq from "@/components/renqi/tjxq";
export default {
  // components: { tjxq },
  data() {
    return {
      keyword: "",
      rq: [],
      sousuo: [],
    };
  },
  methods: {
    sou() {
      console.log(this.keyword);
      this.$store.commit("add", this.keyword);
      this.$http.get("/shop/goods/list").then((res) => {
        this.rq = res.data.data;
        console.log(this.rq);
        var list = this.rq.filter((item) => {
          return item.name == this.keyword;
        });
        this.sousuo = list;
        console.log(this.sousuo); 
      });
    },
    //删除搜索历史
    del() {
      this.$store.commit("del");
    },
  },
};
</script>

<style lang='scss' scoped>
div {
  width: 100%;
  p {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
  }
  ul {
    list-style: none;
    display: flex;
    padding: 0 10px;
    li {
      margin-left: 10px;
      background: #cccccc;
      padding: 4px;
      border-radius: 4px;
    }
  }
  .boxone {
    width: 100%;
    dl {
      width: 49%;
      dt {
        width: 100%;
        img {
          width: 100%;
          height: 100px;
        }
      }
    }
  }
}
</style>